<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>花钱</title>
    <link rel="stylesheet" href="../mui/css/mui.min.css" type="text/css" />
    <link rel="stylesheet" href="../css/base.css" type="text/css" />
    <link rel="stylesheet" href="../css/style.css" type="text/css" />
</head>

<body>
<header class="mui-bar mui-bar-nav">
	<div class="top-head"><a href="个人中心.html"><img src="../images/p-male.png" alt=""></a></div>
    <div class="top-search">
    	<a href="花钱-搜索.html"><span class="top-search-s">搜索</span></a>
    </div>
</header>
<div class="mui-content">
	<div class="h31">
    	<div class="spent-top">
        	<div class="spent-lab">
            	<a href="javascript:;" class="curr" data-val="0">全部</a>
                <a href="javascript:;" data-val="1">女装</a>
                <a href="javascript:;" data-val="2">男装</a>
                <a href="javascript:;" data-val="3">内衣</a>
                <a href="javascript:;" data-val="4">美妆</a>
                <a href="javascript:;" data-val="5">配饰</a>
                <a href="javascript:;" data-val="6">女装</a>
                <a href="javascript:;" data-val="7">男装</a>
                <a href="javascript:;" data-val="8">内衣</a>
                <a href="javascript:;" data-val="9">美妆</a>
                <a href="javascript:;" data-val="10">配饰</a>
            </div>
            <a href="javascript:;" class="spent-more"></a>
            <ul class="spent-lab-dl c-hide">
            	<li><a href="javascript:;" data-val="0">全部</a></li>
            	<li><a href="javascript:;" data-val="1">女装</a></li>
            	<li><a href="javascript:;" data-val="2">男装</a></li>
            	<li><a href="javascript:;" data-val="3">内衣</a></li>
            	<li><a href="javascript:;" data-val="4">美妆</a></li>
            	<li><a href="javascript:;" data-val="5">配饰</a></li>
            	<li><a href="javascript:;" data-val="6">女装</a></li>
            	<li><a href="javascript:;" data-val="7">男装</a></li>
            	<li><a href="javascript:;" data-val="8">内衣</a></li>
            	<li><a href="javascript:;" data-val="9">美妆</a></li>
            	<li><a href="javascript:;" data-val="10">配饰</a></li>
            </ul>
        </div>
        <div class="spent-lab-mb c-hide"></div>
    </div>
    <div class="swiper-container" id="spentContent">
		<div class="swiper-wrapper">
			<div class="swiper-slide spent-hold">
                <div class="spent-silder">
                    <div class="swiper-container" id="spentAdv">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide"><a href="javascript:;" style="background-image:url(../images/example/example1.jpg)"></a></div>
                            <div class="swiper-slide"><a href="javascript:;" style="background-image:url(../images/example/example1.jpg)"></a></div>
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                    <div class="silder-mask"></div>
                </div>
                <div class="spent-nav">
                    <a href="花钱-分类.html"><p><i class="spent-nav-tb1"></i></p><p>今日上新</p></a>
                    <a href="花钱-分类.html"><p><i class="spent-nav-tb2"></i></p><p>9.9包邮</p></a>
                    <a href="花钱-分类.html"><p><i class="spent-nav-tb3"></i></p><p>好券优选</p></a>
                    <a href="花钱-分类.html"><p><i class="spent-nav-tb4"></i></p><p>人气宝贝</p></a>
                    <a href="花钱-分类.html"><p><i class="spent-nav-tb5"></i></p><p>品牌爆款</p></a>
                </div>
                <div class="mt10">
                    <ul class="spent-hot">
                        <li><a href="花钱-汇总分类.html" style="background-image:url(../images/view/spent-hot1.jpg)"></a></li>
                        <li><a href="花钱-汇总分类.html" style="background-image:url(../images/view/spent-hot2.jpg)"></a></li>
                        <li><a href="花钱-汇总分类.html" style="background-image:url(../images/view/spent-hot3.jpg)"></a></li>
                        <li><a href="花钱-汇总分类.html" style="background-image:url(../images/view/spent-hot4.jpg)"></a></li>
                    </ul>
                </div>
                <div>
                    <div class="spent-tit"><i class="icon icon-hot"></i>每日10点上新 · 好券不断</div>
                    <ul class="spent-new">
                        <li>
                            <div>
                                <div class="sn-img" style="background-image:url(../images/example/example4.jpg)"></div>
                                <h4 class="sn-tit c-nowrap"><img src="../images/tianmao.png" alt="" />万美曲奇饼干红枣阿万美曲奇饼干红枣阿</h4>
                                <div class="sn-cost"><span class="fr c-999 c-f10">已售1.9万件</span><span class="c-bold">劵后<i class="ml5">¥13.8</i></span></div>
                                <div class="sn-bot"><i class="tab-quan">领劵立减15元</i></div>
                            </div>
                            <a href="javascript:;" class="sn-share"><i class="icon icon-share"></i>分享</a>
                        </li>
                        <li>
                            <div>
                                <div class="sn-img" style="background-image:url(../images/example/example5.jpg)"></div>
                                <h4 class="sn-tit c-nowrap"><img src="../images/tianmao.png" alt="" />Dove/多芬氨基酸洁面</h4>
                                <div class="sn-cost"><span class="fr c-999 c-f10">已售1.9万件</span><span class="c-bold">劵后<i class="ml5">¥13.8</i></span></div>
                                <div class="sn-bot"><i class="tab-quan">领劵立减15元</i></div>
                            </div>
                            <a href="javascript:;" class="sn-share"><i class="icon icon-share"></i>分享</a>
                        </li>
                        <li>
                            <div>
                                <div class="sn-img" style="background-image:url(../images/example/example4.jpg)"></div>
                                <h4 class="sn-tit c-nowrap"><img src="../images/tianmao.png" alt="" />万美曲奇饼干红枣阿万美曲奇饼干红枣阿</h4>
                                <div class="sn-cost"><span class="fr c-999 c-f10">已售1.9万件</span><span class="c-bold">劵后<i class="ml5">¥13.8</i></span></div>
                                <div class="sn-bot"><i class="tab-quan">领劵立减15元</i></div>
                            </div>
                            <a href="javascript:;" class="sn-share"><i class="icon icon-share"></i>分享</a>
                        </li>
                        <li>
                            <div>
                                <div class="sn-img" style="background-image:url(../images/example/example5.jpg)"></div>
                                <h4 class="sn-tit c-nowrap"><img src="../images/tianmao.png" alt="" />Dove/多芬氨基酸洁面</h4>
                                <div class="sn-cost"><span class="fr c-999 c-f10">已售1.9万件</span><span class="c-bold">劵后<i class="ml5">¥13.8</i></span></div>
                                <div class="sn-bot"><i class="tab-quan">领劵立减15元</i></div>
                            </div>
                            <a href="javascript:;" class="sn-share"><i class="icon icon-share"></i>分享</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="swiper-slide spent-hold">
            	<div class="mt10">
                    <ul class="spent-new">
                        <li>
                            <div>
                                <div class="sn-img" style="background-image:url(../images/example/example4.jpg)"></div>
                                <h4 class="sn-tit c-nowrap"><img src="../images/tianmao.png" alt="" />万美曲奇饼干红枣阿万美曲奇饼干红枣阿</h4>
                                <div class="sn-cost"><span class="fr c-999 c-f10">已售1.9万件</span><span class="c-bold">劵后<i class="ml5">¥13.8</i></span></div>
                                <div class="sn-bot"><i class="tab-quan">领劵立减15元</i></div>
                            </div>
                            <a href="javascript:;" class="sn-share"><i class="icon icon-share"></i>分享</a>
                        </li>
                        <li>
                            <div>
                                <div class="sn-img" style="background-image:url(../images/example/example5.jpg)"></div>
                                <h4 class="sn-tit c-nowrap"><img src="../images/tianmao.png" alt="" />Dove/多芬氨基酸洁面</h4>
                                <div class="sn-cost"><span class="fr c-999 c-f10">已售1.9万件</span><span class="c-bold">劵后<i class="ml5">¥13.8</i></span></div>
                                <div class="sn-bot"><i class="tab-quan">领劵立减15元</i></div>
                            </div>
                            <a href="javascript:;" class="sn-share"><i class="icon icon-share"></i>分享</a>
                        </li>
                        <li>
                            <div>
                                <div class="sn-img" style="background-image:url(../images/example/example4.jpg)"></div>
                                <h4 class="sn-tit c-nowrap"><img src="../images/tianmao.png" alt="" />万美曲奇饼干红枣阿万美曲奇饼干红枣阿</h4>
                                <div class="sn-cost"><span class="fr c-999 c-f10">已售1.9万件</span><span class="c-bold">劵后<i class="ml5">¥13.8</i></span></div>
                                <div class="sn-bot"><i class="tab-quan">领劵立减15元</i></div>
                            </div>
                            <a href="javascript:;" class="sn-share"><i class="icon icon-share"></i>分享</a>
                        </li>
                        <li>
                            <div>
                                <div class="sn-img" style="background-image:url(../images/example/example5.jpg)"></div>
                                <h4 class="sn-tit c-nowrap"><img src="../images/tianmao.png" alt="" />Dove/多芬氨基酸洁面</h4>
                                <div class="sn-cost"><span class="fr c-999 c-f10">已售1.9万件</span><span class="c-bold">劵后<i class="ml5">¥13.8</i></span></div>
                                <div class="sn-bot"><i class="tab-quan">领劵立减15元</i></div>
                            </div>
                            <a href="javascript:;" class="sn-share"><i class="icon icon-share"></i>分享</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="swiper-slide spent-hold">
            	<div class="c-t-center pt100"><span class="loadgif"></span></div>
            </div>
            <div class="swiper-slide spent-hold">
            	<div class="c-t-center pt100"><span class="loadgif"></span></div>
            </div>
            <div class="swiper-slide spent-hold">
            	<div class="c-t-center pt100"><span class="loadgif"></span></div>
            </div>
            <div class="swiper-slide spent-hold">
            	<div class="c-t-center pt100"><span class="loadgif"></span></div>
            </div>
            <div class="swiper-slide spent-hold">
            	<div class="c-t-center pt100"><span class="loadgif"></span></div>
            </div>
            <div class="swiper-slide spent-hold">
            	<div class="c-t-center pt100"><span class="loadgif"></span></div>
            </div>
            <div class="swiper-slide spent-hold">
            	<div class="c-t-center pt100"><span class="loadgif"></span></div>
            </div>
            <div class="swiper-slide spent-hold">
            	<div class="c-t-center pt100"><span class="loadgif"></span></div>
            </div>
            <div class="swiper-slide spent-hold">
            	<div class="c-t-center pt100"><span class="loadgif"></span></div>
            </div>
        </div>
    </div>
    <a href="javascript:;" class="gotop"><i class="icon icon-gotop"></i></a>
</div>
<footer class="mui-bar-footer">
	<div>
        <a href="我.html"><p><i class="icon icon-my"></i></p><p>我</p></a>
        <a href="花钱.html" class="curr"><p><i class="icon icon-spent"></i></p><p>花钱</p></a>
        <a href="生活.html"><p><i class="icon icon-life"></i></p><p>生活</p></a>
        <a href="生钱.html"><p><i class="icon icon-earn"></i></p><p>生钱</p></a>
    </div>
</footer>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../mui/js/mui.min.js"></script>
<script type="text/javascript" src="../js/base.js"></script>
<link rel="stylesheet" href="../widget/swiper/css/swiper.min.css" type="text/css" />
<script type="text/javascript" src="../widget/swiper/js/swiper.min.js"></script>
<script type="text/javascript">
var isslide = true;
var spentContent = new Swiper('#spentContent', {
	direction: 'horizontal',
	noSwiping: true,
	observer: true,
	observeParents: true,
	autoHeight: true,
	on: {
		init: function(){
			$('.spent-hold').height($(window).height() - $('.spent-top').height() - 106);
		}, 
		slideChange: function(){
			if(isslide){
				$('.spent-lab a:eq('+this.activeIndex+')').click();
			}
			isslide = true;
		},
	},
});

//点击分类名称切换类别
function navSlideTo(n) {
	isslide = false;
	spentContent.slideTo(n, 300, true);
}

var swiper = new Swiper('#spentAdv', {
	pagination: {
		el: '.swiper-pagination',
	}
});


$(function(){
	$(window).scroll(function(){
		var sctop = $(this).scrollTop();
		if(sctop > 150){
			$('.gotop').show(300);
		}else if(sctop < 140){
			$('.gotop').hide(300);	
		}
	});
	$('.gotop').on('click',function(){
		$('body,html').animate({scrollTop:0},300);
	});
});
//lab
$('.mui-content').on('click','.spent-lab a',function(){
	var index = $(this).index();
	$(this).addClass('curr').siblings().removeClass('curr');
	var _this = $(this),
		wWidth = _this.parent().width(),
		sLeft = _this.parent().scrollLeft(),
		tLeft = _this.position().left;
	$(".spent-lab").animate({
		'scrollLeft': sLeft + tLeft - wWidth/2
	}, 300);
	navSlideTo(index);
});
$('.mui-content').on('click','.spent-more',function(){
	var more = $(this).hasClass('sshow');
	if(more){
		$(this).removeClass('sshow');
		$('.spent-lab-dl').slideUp(200);
		$('.spent-lab-mb').hide();
	}else{
		$(this).addClass('sshow');
		$('.spent-lab-dl').slideDown(200);
		$('.spent-lab-mb').show();
	}
});
$('.mui-content').on('click','.spent-lab-dl a',function(){
	var dval = $(this).attr('data-val');
	slabClose();
	$('.spent-lab a[data-val='+dval+']').click();
});
$('.mui-content').on('click','.spent-lab-mb',function(){
	slabClose();
});
function slabClose(){
	$('.spent-more').removeClass('sshow');
	$('.spent-lab-dl').slideUp(200);
	$('.spent-lab-mb').hide();
}
</script>
</body>
</html>